<template>
<div id="article-comments"> 
    <a-divider>评论</a-divider>
    <div>
            <div v-for=" item in CommentGroupForm.body"  :key="item.content"  v-html="item.content"></div>
    </div>
   <a-textarea
      v-model:value="UserCommentData"
      placeholder="用户评论"
      class="bre-margin-bottom-5"
      auto-size
    />

    <a-button @click="AddComments" style="float: right;" >发表</a-button>
    <div style='clear:both'></div>
</div>
</template>
<script>
// import moment from 'moment';
import {
     reactive,
     ref,
      } from "vue";
export default {
    name: "Comment",
    setup(){
        let UserCommentData=ref("")
       const CommentGroupForm=reactive({
            body:[ ] })
        function AddComments(){
            
            CommentGroupForm.body=[{content:`哈哈我接口还没有写呢，不着急评论哈,可以到我的b站账号下评论 <a href="https://www.bilibili.com/video/BV1xU4y147hV">点我点我点我</a> `}]
            // CommentGroupForm.body.push({content:UserCommentData})
        }
        return{
            UserCommentData,CommentGroupForm,AddComments
        }
    }
  
};

</script>
<style lang="scss"   scoped>
#article-comments{
width: 100%;
    .ant-col.ant-form-item-control-wrapper{
        width: 100%;
    background: #333;
}
    }

</style>